<template>
  <div id="columnsEchart" style="height: 38vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "columnsEchart",
  data() {
    return {
      chart: null,
      options: {}
    };
  },
  created() {
    // this.getData();
  },
  mounted() {
    this.initOptions();
    this.initCharts();
  },
  methods: {
    initOptions() {
      // this.options = {
      //   legend: {},
      //   tooltip: {},
      //   dataset: {
      //     source: [
      //       ["product", "11月1日", "11月2日", "11月3日", "11月4日", "11月5日"],
      //       ["卫生情况", 41.1, 30.4, 65.1, 53.3, 43],
      //       ["添加剂含量", 86.5, 92.1, 85.7, 83.1, 32],
      //       ["质量要求", 24.1, 67.2, 79.5, 86.4, 66],
      //       ["防疫情况", 24.1, 67.2, 79.5, 86.4, 66]
      //     ]
      //   },
      //   xAxis: [
      //     { type: "category", gridIndex: 0 },
      //     { type: "category", gridIndex: 1 }
      //   ],
      //   yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
      //   grid: [{ bottom: "55%" }, { top: "55%" }],
      //   series: [
      //     // These series are in the first grid.
      //     { type: "bar", seriesLayoutBy: "row" },
      //     { type: "bar", seriesLayoutBy: "row" },
      //     { type: "bar", seriesLayoutBy: "row" },
      //     { type: "bar", seriesLayoutBy: "row" },
      //     // These series are in the second grid.
      //     { type: "bar", xAxisIndex: 1, yAxisIndex: 1 },
      //     { type: "bar", xAxisIndex: 1, yAxisIndex: 1 },
      //     { type: "bar", xAxisIndex: 1, yAxisIndex: 1 },
      //     { type: "bar", xAxisIndex: 1, yAxisIndex: 1 }
      //   ]
      // };
      this.options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ["卫生情况", "添加剂含量", "质量要求", "防疫情况", "占比"]
        },
        xAxis: [
          {
            type: "category",
            data: [
              "11月1日",
              "11月2日",
              "11月3日",
              "11月4日",
              "11月5日",
              "11月6日",
              "11月7日",
              "11月8日",
              "11月9日",
              "11月10日"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "总户数",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} 户数"
            }
          },
          {
            type: "value",
            name: "占比",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            name: "卫生情况",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " 户";
              }
            },
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ]
          },
          {
            name: "添加剂含量",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " 户";
              }
            },
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3
            ]
          },
          {
            name: "质量要求",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " 户";
              }
            },
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ]
          },
          {
            name: "防疫情况",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " 户";
              }
            },
            data: [
              2.0,
              4.9,
              7.0,
              32,
              34.6,
              44.7,
              33.6,
              2.2,
              54.6,
              20.0,
              6.4,
              113.3
            ]
          },
          {
            name: "占比",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + " %";
              }
            },
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2
            ]
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("columnsEchart"));

      this.chart.setOption(this.options);
    }
  }
};
</script>
